{{ define "admin/login.html" }}
{{template "header" .}}

<div class="container">
  <div class="form row">
    <div class="alert alert-warning  alert-dismissible hide" role="alert" id="idalert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <strong>Warning!</strong> 用户名或密码错误！
    </div>
    <form
      role="form" 
      method="POST"
      onSubmit="return false" 
      action="/auth/login"
      class="form-horizontal col-sm-offset-3 col-md-offset-3" 
      style="margin-top: 100px;" 
      id="login_form">
      <h3 class="form-title">Login to your account</h3>
      <div class="col-sm-9 col-md-9">
        <div class="form-group">
          <i class="fa fa-user fa-lg"></i>
						<input class="form-control required" type="text" placeholder="Username" name="username" autofocus="autofocus" maxlength="20"/> 
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="Password">
        </div>
        <div class="form-group">
          <label class="checkbox">
            <input type="checkbox" name="remember" value="1"/> Remember me
          </label>
          <hr />
          <a href="javascript:;" id="register_btn" class="">Create an account</a>
        </div>
        <div class="submit-row">
          <input type="submit" value="Login" class="default" onclick="login()" />
        </div>
      </div>
    </form>
  </div>
</div>
<script>

$.fn.serializeObject = function() {
  var o = {};
  var a = this.serializeArray();
  $.each(a, function() {
      if (o[this.name]) {
          if (!o[this.name].push) {
              o[this.name] = [ o[this.name] ];
          }
          o[this.name].push(this.value || '');
      } else {
          o[this.name] = this.value || '';
      }
  });
  return o;
};

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

function login() {
    console.log('login', $('form').serializeObject())
    var options = {
        url: "/auth/login",
        type: 'post',
        contentType: "application/json",
        data: JSON.stringify($('form').serializeObject()),
        success: function(data){
          $('#idalert').attr('class','alert alert-warning');
            console.log(data,data['code'])
            if (data['code'] === 200) {
              document.cookie="Authorization=Bearer "+ data['token'] + ";path=/;expires=" + data['expire']
              console.log('jump ',getQueryVariable('url'))
              window.location.href=getQueryVariable('url')
            }
        },
        error: function(data) {
          console.log('error', data)
            $('#idalert').attr('class','alert alert-danger');
            window.setTimeout(function() { $('#idalert').attr('class','alert alert-danger hide'); }, 2000);
        }
    }
    $.ajax(options);
}
</script>

{{template "footer" .}}
{{ end }}

